<template>
  <div>
    <el-upload v-model:file-list="fileList" class="upload-demo" drag :http-request="fileUpload">
      <el-icon class="el-icon--upload">
        <Headset />
      </el-icon>
      <div class="el-upload__text">
        拖拽MP3文件到此处或<em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          每次只能上传一个，解析成功后可点击下载按钮
        </div>
      </template>
    </el-upload>
    <el-button @click="downloadFile" v-show="isDownload" type="success">解析成功，下载伴奏</el-button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
}
</script>
<script setup>
import { test } from '@/api/test'
import { ref } from 'vue'
import { download } from '@/utils/request'

let isDownload = ref(false)
let fileInfo = ref(null)

const fileList = ref([])
const fileUpload = (options) => {
  let fd = new FormData()
  fd.append('file', fileList.value[0].raw)
  test(fd).then((res) => {
    if (res.data.url) {
      fileInfo.value = res
      isDownload.value = true
    }
  })
}
const downloadFile = () => {
  download('/testdownload', fileInfo.value.data.url, '伴奏.mp3')
}
</script>

<style scoped lang="scss">
.el-upload__tip{
  color: #d1d0d0;
}
</style>